import React from 'react'
import { incre,decre,asyncIncre,asyncDecre } from "../../store/slices/countSlice"
import { asyncZanDecre, asyncZanIncre, zanDecre, zanIncre } from '../../store/slices/zanSlice';

import {useSelector,useDispatch} from "react-redux"
import Hitokoto from '../../components/Hitokoto/Hitokoto';
import Lol from '../../components/Lol/Lol';
export default function Redux() {

    
    // useSelector 获取 store 中的所有的数据   count  zan

    // 1.  获取store中的所有数据
    // let state = useSelector((state)=>{return state});

    // 2.简写形式
    // let state = useSelector(state=> state);

    // 3. 单独 获取store中的某些数据
    // let count = useSelector(state=> state.count);

    // 4. 单独 获取store中的某些数据
    let {count,zan} = useSelector(state=> state);
    

    //  useDispatch() 获取store 中的 dispatch  方法
    let dispatch = useDispatch();

    // store 数据是响应式

    let add = ()=>{

        //调用 action 方法
        dispatch(incre(1));
        
       
    }

    //创建 减 方法
    let sub = ()=>{
        //调用 action 方法
        dispatch(decre(2));
       
    }

    //异步加
    let asyncAdd = ()=>{
        //调用异步方法更新store数据
        dispatch(asyncIncre(3));
        
    }

    //异步 减
    let asyncSub = ()=>{
        dispatch(asyncDecre(4));
       
    }



    return (
        <div style={{ padding: "100px" }}>

            <Lol/>

            <hr />


            <Hitokoto/>

            <hr />

            <h1>store 中的数据是：{count.value}</h1>
            <button onClick={add}>+++++1111111111</button>
            <button onClick={sub}>--------222222222</button>
            <button onClick={asyncAdd}>异步 +++++++++33333</button>
            <button onClick={asyncSub}>异步 -----------44444</button>

            <hr />

            <h1>当前的点赞数：{zan.value}</h1>
            <button onClick={()=>{
                dispatch(zanIncre(1));
                 
            }}>同步点赞 +1</button>
            <button onClick={()=>{
                dispatch(zanDecre(2));
                 
            }}>同步点赞 -2</button>

            <button onClick={()=>{
                dispatch(asyncZanIncre(3));
               
               
            }}>异步点赞 +3</button>

            <button onClick={()=>{
                dispatch(asyncZanDecre(4));
               
            }}>异步点赞 -4</button>

        </div>
    )
}
